<%--
  Created by IntelliJ IDEA.
  User: 13437
  Date: 2023/9/1
  Time: 10:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>餐桌管理</title>
    <link rel="stylesheet" href="/static/plugins/layui2.7.6/css/layui.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">

    <%--头部与左侧样式--%>
    <jsp:include page="../commons/head.jsp"/>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">

            <div class="layui-row">
                <div class="layui-col-md11" >
                    <table id="list" class="layui-hide" lay-filter="test"></table>

                    <%--头部工具栏--%>
                    <script type="text/html" id="toolbarDemo">
                        <div class="layui-btn-container">
                            <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="deletes">批量删除</button>
                            <button class="layui-btn layui-btn-sm" lay-event="addData">添加</button>
                        </div>
                    </script>
                    <%--右侧工具栏--%>
                    <script type="text/html" id="barDemo">
                        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </script>

                    <%--右侧工具栏修改弹出层--%>
                    <div style="display: none" id="updateDiv" >
                        <form  class="layui-form" lay-filter="formTable">
                            <div class="layui-form-item">
                                <label class="layui-form-label">编号</label>
                                <div class="layui-input-block">
                                    <input id="id" type="text" name="id" lay-verify="title" autocomplete="off" class="layui-input" readonly>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">订单号</label>
                                <div class="layui-input-block">
                                    <input id="ordId" type="text" name="ordId" lay-verify="title" autocomplete="off" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">人数</label>
                                <div class="layui-input-block">
                                    <input id="num" type="text" name="num" lay-verify="title" autocomplete="off" class="layui-input" readonly>
                                </div>
                            </div>


                            <div class="layui-form-item">
                                <label class="layui-form-label">描述</label>
                                <div class="layui-input-block">
                                    <input id="description" type="text" name="description" lay-verify="title" autocomplete="off" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">状态</label>
                                <div class="layui-input-block">
<%--                                    <input id="uday" type="text" name="onLineDay" lay-verify="title" autocomplete="off" class="layui-input">--%>
                                    <select name="flag" id="flag">
                                        <option class="one">--请选择--</option>
                                        <option value="0">空闲</option>
                                        <option value="1">满座</option>
                                    </select>
                                </div>
                            </div>


                        </form>
                    </div>


                </div>
            </div>

        </div>
    </div>

    <%--引入底部样式--%>
    <jsp:include page="../commons/footer.jsp"/>


</div>


<script src="/static/plugins/layui2.7.6/layui.js"></script>
<script>
    layui.use(['element', 'layer', 'util', 'carousel','upload','table','form'], function () {
        var element = layui.element
            , layer = layui.layer
            , util = layui.util
            , $ = layui.$;
        var carousel = layui.carousel;
        var upload = layui.upload;
        var table = layui.table;
        var form = layui.form;


        // 加载数据表格
        table.render({
            elem: '#list',
            // 开启头部工具栏
            toolbar: '#toolbarDemo',
            cellMinWidth: 80,
            // AJAX 数据接口
            url: '/table/findByPage',
            // 请求方式
            method: 'get',
            // 开启分页 当前页默认是 1,
            page: true,
            // 每页显示的数量
            limit: 3,
            limits: [3,5,10],
            // 展示所有的数据列
            cols: [[
                {type: 'checkbox', fixed: 'left'},
                /*
                field 与 对象的属性一致
                title 显示在表格里面的字段名
                sort 可以排序
                 */
                {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'},
                {field: 'ordId', title: '订单号', width:150,align: 'center'},
                {field: 'num', title: '人数', width:200,align: 'center'},
                {field: 'description', title: '描述', width:150,align: 'center'},
                {field: 'flag', title: '餐桌状态', width:150,align: 'center',
                    templet: function (d) {
                        // 空闲
                        if (d.flag == '0') {
                            return "<button class='layui-btn layui-btn-green'>空闲</button>";
                        }
                        // 满座
                        else {
                            return "<button class='layui-btn layui-btn-danger'>满座</button>";
                        }
                    }
                },
               {fixed: 'right', title:'操作', width: 125, minWidth: 125, toolbar: '#barDemo'}
            ]]

        });

        // 右侧工具栏事件
        table.on('tool(test)',function(obj) {
            // 获取当前行的数据
            var data = obj.data;
            // 获取 lay-event 对应的值
            var layEvent = obj.event;

            // 删除
            if (layEvent == 'del') {
                layer.confirm('您确定删除吗?',function (index) {
                    // 删除
                    //var userId =  data.userId;

                    $.ajax({
                        // 请求的地址
                        url: '/table/delete',
                        // 请求的方式
                        type: 'post',
                        // 请求的参数
                        data: data,
                        // 服务器返回的数据类型
                        dataType: 'json',
                        // 成功
                        success: function(data) {
                            layer.msg(data,function (){

                                // 关闭加载层
                                // layer.closeAll(); 关闭所有
                                layer.close(index);
                                // 重载数据 table标签的 id 属性 不要加 #
                                table.reload('list');
                            });
                        },
                        error : function () {
                            // 关闭加载层
                            // layer.closeAll(); 关闭所有
                            layer.close(index);
                            // 重载数据 table标签的 id 属性 不要加 #
                            table.reload('list');
                        }
                    })


                })
            }
            // 修改
            else if (layEvent == 'edit') {
                // 给输入框赋值


                layer.open({
                    type: 1,
                    content: $('#updateDiv'),
                    title: '修改用户信息',
                    area: ['680px', '500px'],
                    btn: ['修改', '返回'],
                    btnAlign: 'l',
                    anim: 1,
                    shade: 0,
                    // 弹出之后回调
                    success: function (layerNow,index) {
                        $('#id').val(data.id);
                        $('#ordId').val(data.ordId);
                        $('#num').val(data.num);
                        $('#description').val(data.description);
                        // $("div").children("p.1");
                        $('#flag').find("option.one").val(123);
                    },
                    // 点击确定之后回调
                    yes: function (index,layerNow) {
                        // 获取表单数据
                        var formData = form.val('formTable');
                        $.ajax({
                            url: '/table/update',
                            type: 'post',
                            data: formData,
                            dataType: 'json',
                            success: function (d) {
                                layer.msg(d,function(){
                                    layer.closeAll();
                                    table.reload('list');
                                });
                            },
                            error: function (d) {
                                layer.msg(d,function(){
                                    layer.closeAll();
                                    table.reload('list');
                                });
                            }
                        });

                    }
                });
            }

        });


    });
</script>


</body>
</html>
